<template>
  <div id="Navigation">
    <div class="box-navigation">
      <div class="box" @click="dayrecommend()">
        <svg
          t="1605508854692"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2512"
          width="25"
          height="25"
        >
          <path
            d="M759.466667 949.333333c-4.266667 0-10.666667-2.133333-14.933334-4.266666L503.466667 810.666667l-241.066667 134.4c-10.666667 6.4-23.466667 4.266667-34.133333-2.133334-10.666667-6.4-14.933333-19.2-12.8-32l46.933333-285.866666-196.266667-202.666667c-8.533333-8.533333-10.666667-21.333333-6.4-32s12.8-19.2 25.6-21.333333l270.933334-40.533334 121.6-258.133333c4.266667-10.666667 17.066667-19.2 29.866666-19.2 12.8 0 23.466667 6.4 29.866667 19.2l121.6 258.133333 270.933333 40.533334c12.8 2.133333 21.333333 10.666667 25.6 21.333333 4.266667 10.666667 0 23.466667-6.4 32l-196.266666 202.666667L789.333333 913.066667c2.133333 12.8-2.133333 23.466667-12.8 32-4.266667 2.133333-10.666667 4.266667-17.066666 4.266666z m-258.133334-206.933333c4.266667 0 10.666667 2.133333 14.933334 4.266667l198.4 110.933333-38.4-236.8c-2.133333-10.666667 2.133333-19.2 8.533333-27.733333l164.266667-168.533334-226.133334-34.133333c-10.666667-2.133333-19.2-8.533333-23.466666-17.066667l-100.266667-211.2-100.266667 211.2c-4.266667 10.666667-12.8 17.066667-23.466666 17.066667L151.466667 424.533333l164.266666 168.533334c6.4 6.4 10.666667 17.066667 8.533334 27.733333l-38.4 236.8 198.4-110.933333c6.4-2.133333 10.666667-4.266667 17.066666-4.266667z"
            fill="#ffffff"
            p-id="2513"
          ></path>
        </svg>
        <p>推荐</p>
      </div>
      <div class="box" @click="playlist()">
        <svg
          t="1605508980372"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4827"
          width="25"
          height="25"
        >
          <path
            d="M85.333333 768h426.666667v85.333333H85.333333v-85.333333z m0-298.666667h597.333334v85.333334H85.333333v-85.333334z m0-298.666666h853.333334v85.333333H85.333333V170.666667z m725.333334 476.586666V384h213.333333v85.333333h-128v298.666667a128 128 0 1 1-85.333333-120.746667zM768 810.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z"
            p-id="4828"
            fill="#ffffff"
          ></path>
        </svg>
        <p>歌单</p>
      </div>
      <div class="box" @click="ranking()">
        <svg
          t="1605509053624"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5335"
          width="25"
          height="25"
        >
          <path
            d="M672 896c-17.6 0-32-14.4-32-32V192c0-17.6-14.4-32-32-32H416c-17.6 0-32 14.4-32 32v672c0 17.6-14.4 32-32 32s-32-14.4-32-32V192c0-52.8 43.2-96 96-96h192c52.8 0 96 43.2 96 96v672c0 17.6-14.4 32-32 32z"
            p-id="5336"
            fill="#ffffff"
          ></path>
          <path
            d="M864 928H160c-52.8 0-96-43.2-96-96V576c0-52.8 43.2-96 96-96h64c17.6 0 32 14.4 32 32s-14.4 32-32 32h-64c-17.6 0-32 14.4-32 32v256c0 17.6 14.4 32 32 32h704c17.6 0 32-14.4 32-32V384c0-17.6-14.4-32-32-32h-64c-17.6 0-32-14.4-32-32s14.4-32 32-32h64c52.8 0 96 43.2 96 96v448c0 52.8-43.2 96-96 96z"
            p-id="5337"
            fill="#ffffff"
          ></path>
        </svg>
        <p>榜单</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Navigation",
  data() {
    return {};
  },
  methods: {
    dayrecommend() {
      this.$router.push({ path: "/darecommend" });
    },
    playlist() {
      this.$router.push({ path: "/songlist" });
    },
    ranking() {
      this.$router.push({ path: "/rankinglist" });
    },
  },
};
</script>

<style scoped>
#Navigation .box-navigation {
  top: 215px;
  width: 99%;
  height: 50px;
  position: absolute;
  display: flex;
  justify-content: space-evenly;
}
#Navigation .box-navigation .box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  background: #2ae0c8;
  position: relative;
}
#Navigation .box-navigation .box svg {
  position: absolute;
  top: 8px;
  left: 7px;
}
#Navigation .box-navigation .box p {
  color: #2ae0c8;
  position: absolute;
  top: 20px;
  left: 7px;
  font-size: 10px;
}
</style>